<template>
	<view class="campus-news">
		<!-- 顶部标题和切换按钮 -->
		<view class="news-header">
			<text class="title">大辛资讯</text>
			<view class="switch-tabs">
				<text class="tab" :class="{active: currentTab === 'recommend'}"
					@click="currentTab = 'recommend'">推荐</text>
				<text class="tab" :class="{active: currentTab === 'education'}"
					@click="currentTab = 'education'">教育</text>
				<text class="tab" :class="{active: currentTab === 'technology'}"
					@click="currentTab = 'technology'">科技</text>
			</view>
		</view>

		<!-- 内容区域 -->
		<scroll-view class="content-container" scroll-y>
			<!-- 推荐内容 -->
			<view v-if="currentTab === 'recommend'" class="tab-content">
				<!-- 轮播图 - 双图模式 -->
				<view class="section-title">校园快讯</view>
				<swiper class="double-swiper" autoplay circular :display-multiple-items="displayMultipleItems">
					<swiper-item v-for="(item, index) in banners" :key="index" @click="goDetail(item.id)">
						<view class="swiper-item-container">
							<image class="swiper-image" :src="item.image" mode="aspectFill"></image>
							<view class="swiper-mask"></view>
							<text class="swiper-title">{{ item.title }}</text>
						</view>
					</swiper-item>
				</swiper>

				<!-- 新闻列表 - 瀑布流 -->
				<view class="section-title">校内动态</view>
				<view class="waterfall-list">
					<view class="waterfall-item" v-for="(item, index) in campusNews" :key="index"
						@click="goDetail(item.id)" :style="{ '--delay': index * 0.1 + 's' }">
						<image class="item-image" :src="item.image" mode="aspectFill"></image>
						<view class="item-content">
							<text class="item-title">{{ item.title }}</text>
							<view class="item-meta">
								<text class="item-department">{{ item.department }}</text>
								<text class="item-time">{{ item.time }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 教育内容 -->
			<view v-if="currentTab === 'education'" class="tab-content">
				<view class="section-title">教育资讯</view>
				<view class="double-education-list">
					<view class="education-row" v-for="(row, rowIndex) in chunkArray(educationNews, 2)" :key="rowIndex">
						<view class="education-item" v-for="(item, index) in row" :key="index" @click="goDetail(item.id)">
							<image class="edu-image" :src="item.image" mode="aspectFill"></image>
							<view class="edu-content">
								<text class="edu-title">{{ item.title }}</text>
								<text class="edu-desc">{{ item.description }}</text>
								<view class="edu-footer">
									<text class="edu-source">{{ item.source }}</text>
									<text class="edu-time">{{ item.time }}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 科技内容 -->
			<view v-if="currentTab === 'technology'" class="tab-content">
				<view class="section-title">科技前沿</view>
				<view class="tech-grid">
					<view class="tech-card" v-for="(item, index) in techNews" :key="index" @click="goDetail(item.id)">
						<image class="tech-image" :src="item.image" mode="aspectFill"></image>
						<view class="tech-tag">{{ item.tag }}</view>
						<text class="tech-title">{{ item.title }}</text>
						<text class="tech-summary">{{ item.summary }}</text>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentTab: 'recommend', // 当前选中的标签
				displayMultipleItems: 2, // 轮播图显示数量
				banners: [{
						id: 1,
						image: '/static/aver1.jpg',
						title: '2023年度优秀学员表彰大会'
					},
					{
						id: 2,
						image: '/static/aver1.jpg',
						title: '新学期开学典礼圆满举行'
					},
					{
						id: 3,
						image: '/static/aver1.jpg',
						title: '教师技能大赛获奖名单公布'
					},
					{
						id: 4,
						image: '/static/aver1.jpg',
						title: '校园文化艺术节开幕'
					}
				],
				campusNews: [{
						id: 6,
						image: '/static/aver1.jpg',
						title: '数学教研组开展公开课活动',
						department: '数学组',
						time: '2023-12-18'
					},
					{
						id: 7,
						image: '/static/aver1.jpg',
						title: '英语演讲比赛圆满结束',
						department: '英语组',
						time: '2023-12-16'
					},
					{
						id: 8,
						image: '/static/aver1.jpg',
						title: '物理实验室新设备投入使用',
						department: '物理组',
						time: '2023-12-14'
					}
				],
				educationNews: [{
						id: 9,
						image: '/static/aver1.jpg',
						title: '新课程标准解读讲座',
						description: '教育部专家解读最新课程标准变化',
						source: '教务处',
						time: '2023-12-10'
					},
					{
						id: 10,
						image: '/static/aver1.jpg',
						title: '教学改革研讨会',
						description: '各学科组讨论新学期教学改革方案',
						source: '教研处',
						time: '2023-12-08'
					},
					{
						id: 11,
						image: '/static/aver1.jpg',
						title: '教师培训工作坊',
						description: '提升教师教学技能的专业培训',
						source: '教师发展中心',
						time: '2023-12-05'
					},
					{
						id: 12,
						image: '/static/aver1.jpg',
						title: '学生心理健康讲座',
						description: '关注学生心理健康成长',
						source: '心理辅导中心',
						time: '2023-12-03'
					}
				],
				techNews: [{
						id: 13,
						image: '/static/aver1.jpg',
						title: 'AI在教育中的应用',
						summary: '探讨人工智能如何改变传统教学模式',
						tag: '人工智能'
					},
					{
						id: 14,
						image: '/static/aver1.jpg',
						title: '虚拟现实实验室',
						summary: '我校新建VR实验室投入使用',
						tag: 'VR技术'
					}
				]
			}
		},
		methods: {
			goDetail(id) {
				uni.navigateTo({
					url: `/pages/news/detail?id=${id}`
				});
			},
			// 将数组分割成指定大小的块
			chunkArray(arr, size) {
				return Array.from({ length: Math.ceil(arr.length / size) }, (v, i) =>
					arr.slice(i * size, i * size + size)
				);
			},
			// 检查屏幕方向
			checkScreenOrientation() {
				const query = uni.createSelectorQuery().in(this);
				query.select('.content-container').boundingClientRect(data => {
					if (data && data.width > data.height) {
						this.displayMultipleItems = 2; // 横屏显示2个
					} else {
						this.displayMultipleItems = 1; // 竖屏显示1个
					}
				}).exec();
			}
		},
		onReady() {
			this.checkScreenOrientation();
			// 监听屏幕旋转
			uni.onWindowResize(() => {
				this.checkScreenOrientation();
			});
		}
	}
</script>

<style lang="scss" scoped>
	* {
		box-sizing: border-box;
	}

	.campus-news {
		display: flex;
		flex-direction: column;
		background: #f8f9fa;
	}

	.news-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;
		background: #fff;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
		position: sticky;
		top: 0;
		z-index: 10;

		.title {
			font-size: 48rpx;
			font-weight: bold;
			color: #333;
			position: relative;
			padding-left: 20rpx;

			&::before {
				content: '';
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				width: 8rpx;
				height: 32rpx;
				background: linear-gradient(to bottom, #4e7af3, #8a63f2);
				border-radius: 4rpx;
			}
		}

		.switch-tabs {
			display: flex;
			background: #f5f7fa;
			border-radius: 50rpx;
			padding: 8rpx;

			.tab {
				font-size: 28rpx;
				color: #666;
				padding: 12rpx 24rpx;
				border-radius: 40rpx;
				transition: all 0.3s;

				&.active {
					color: #fff;
					font-weight: bold;
					background: linear-gradient(90deg, #4e7af3, #8a63f2);
					box-shadow: 0 4rpx 12rpx rgba(78, 122, 243, 0.3);
				}
			}
		}
	}

	.content-container {
		flex: 1;
		padding: 0 30rpx;
	}

	.tab-content {
		padding-bottom: 40rpx;
	}

	/* 双图轮播样式 */
	.double-swiper {
		width: 100%;
		height: 350rpx;
		border-radius: 20rpx;
		overflow: hidden;
		margin-bottom: 40rpx;
		box-shadow: 0 12rpx 24rpx rgba(0, 0, 0, 0.1);

		.swiper-item-container {
			width: 100%;
			height: 100%;
			padding: 0 10rpx;
			display: flex;
			flex-direction: column;
		}

		.swiper-image {
			width: 100%;
			height: 280rpx;
			border-radius: 16rpx;
		}

		.swiper-mask {
			position: absolute;
			bottom: 0;
			left: 10rpx;
			width: calc(100% - 20rpx);
			height: 80rpx;
			background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
			border-radius: 0 0 16rpx 16rpx;
		}

		.swiper-title {
			position: absolute;
			bottom: 20rpx;
			left: 30rpx;
			color: #fff;
			font-size: 28rpx;
			font-weight: bold;
			z-index: 2;
			width: calc(100% - 60rpx);
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}

	.section-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		margin: 40rpx 0 30rpx;
		position: relative;
		padding-left: 20rpx;

		&::before {
			content: '';
			position: absolute;
			left: 0;
			top: 50%;
			transform: translateY(-50%);
			width: 6rpx;
			height: 28rpx;
			background: linear-gradient(to bottom, #4e7af3, #8a63f2);
			border-radius: 3rpx;
		}
	}

	.waterfall-list {
		column-count: 2;
		column-gap: 20rpx;

		.waterfall-item {
			break-inside: avoid;
			margin-bottom: 20rpx;
			background: #fff;
			border-radius: 16rpx;
			overflow: hidden;
			box-shadow: 0 8rpx 16rpx rgba(0, 0, 0, 0.05);
			animation: fadeInUp 0.6s ease-out both;
			animation-delay: var(--delay);

			.item-image {
				width: 100%;
				height: 300rpx;
			}

			.item-content {
				padding: 20rpx;

				.item-title {
					font-size: 28rpx;
					font-weight: bold;
					color: #333;
					margin-bottom: 15rpx;
					display: block;
				}

				.item-meta {
					display: flex;
					justify-content: space-between;

					.item-department {
						font-size: 24rpx;
						color: #4e7af3;
						background: rgba(78, 122, 243, 0.1);
						padding: 4rpx 12rpx;
						border-radius: 10rpx;
					}

					.item-time {
						font-size: 22rpx;
						color: #999;
					}
				}
			}
		}
	}

	/* 双列教育资讯样式 */
	.double-education-list {
		.education-row {
			display: flex;
			justify-content: space-between;
			margin-bottom: 30rpx;
		}

		.education-item {
			width: 48%;
			background: #fff;
			border-radius: 16rpx;
			overflow: hidden;
			box-shadow: 0 8rpx 16rpx rgba(0, 0, 0, 0.05);

			.edu-image {
				width: 100%;
				height: 450rpx;
			}

			.edu-content {
				padding: 20rpx;

				.edu-title {
					font-size: 28rpx;
					font-weight: bold;
					color: #333;
					margin-bottom: 10rpx;
					display: block;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.edu-desc {
					font-size: 24rpx;
					color: #666;
					margin-bottom: 15rpx;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					overflow: hidden;
				}

				.edu-footer {
					display: flex;
					justify-content: space-between;

					.edu-source {
						font-size: 22rpx;
						color: #4e7af3;
					}

					.edu-time {
						font-size: 22rpx;
						color: #999;
					}
				}
			}
		}
	}

	.tech-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 20rpx;

		.tech-card {
			background: #fff;
			border-radius: 16rpx;
			overflow: hidden;
			box-shadow: 0 8rpx 16rpx rgba(0, 0, 0, 0.05);
			position: relative;

			.tech-image {
				width: 100%;
				height: 480rpx;
			}

			.tech-tag {
				position: absolute;
				top: 20rpx;
				right: 20rpx;
				background: rgba(78, 122, 243, 0.9);
				color: #fff;
				font-size: 22rpx;
				padding: 4rpx 12rpx;
				border-radius: 20rpx;
			}

			.tech-title {
				display: block;
				font-size: 28rpx;
				font-weight: bold;
				color: #333;
				padding: 20rpx 20rpx 10rpx;
			}

			.tech-summary {
				display: block;
				font-size: 24rpx;
				color: #666;
				padding: 0 20rpx 20rpx;
			}
		}
	}

	@keyframes fadeInUp {
		from {
			opacity: 0;
			transform: translateY(40rpx);
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	/* 横屏适配 */
	@media (orientation: landscape) {
		.double-swiper {
			height: 600rpx;
			
			.swiper-image {
				height: 520rpx;
			}
		}
		
		.waterfall-list .waterfall-item .item-image {
			height: 350rpx;
		}
	}
</style>